import React, { useState, useEffect } from 'react'
import Retreat from './Retreat'
export default function Sound() {
  useEffect(() => {
  })
  const [list, setList] = useState([
    { id: 1, name: '雨', img: 'https://i04piccdn.sogoucdn.com/e264088d98a5b520', audio: '/public/sound/雨.mp4' },
    { id: 2, name: '雷雨', img: 'https://i02piccdn.sogoucdn.com/eba1c01c8940f9bd', audio: '/public/sound/雷雨.mp4' },
    { id: 3, name: '篝火', img: 'https://i01piccdn.sogoucdn.com/ce97c4bd0ba0cb19', audio: '/public/sound/篝火.mp4' },
    { id: 4, name: '鸟鸣', img: 'https://i02piccdn.sogoucdn.com/644107026d1afbe6', audio: '/public/sound/鸟叫.mp4' },
    { id: 5, name: '海浪', img: 'https://i03piccdn.sogoucdn.com/7ba86bf6e230241e', audio: '/public/sound/海浪.mp4' }
  ])

  const change = (i) => {
    let audio = document.querySelector('audio')
    audio.src = i
    // console.log(audio);
    
    audio.play()
  }

  return (
    <div className='box'>
      <Retreat/>
      <h1>声音场景</h1>
      <p style={{
        color: '#ccc',
        margin:'1rem 0'
      }}>置身于自然万物的声音时空</p>
      <audio id='audio' src='' loop />
      <div style={{
        margin: '1rem 0'
      }}>
        {list.map((i, ind) => {
          return <dl key={i.id} onClick={() => {
            change(i.audio)
          }} style={{
            display:'inline-block',
            width:'30%',
            margin:'1.5%',
            textAlign:'center',
            height:'12rem'
          }}>
            <dd>
              <img src={i.img} style={{
                width:'100%',
                height:"160px",
                borderRadius:'1rem'
              }}></img>
            </dd>
            <dt>{i.name}</dt>
          </dl>
        })}
      </div>


      
    </div>
  )
}